<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}
			
			#y_zong {
				width: 80%;
				min-width: 350px;
				height: 610px;
				border: 1px solid black;
			}
			
			#y_cuowu {
				width: 40px;
				height: 40px;
				/*border: 1px solid black;*/
				background-color: #E14835;
				cursor: pointer;
			}
			
			#y_cuowu i {
				line-height: 40px;
				font-size: 30px;
				color: white;
				font-weight: bolder;
			}
			
			#y_content {
				position: relative;
				left: -86px;
				top: 40px;
				width: 53%;
				height: 337px;
				min-width: 540px;
				margin: 0px auto;
				overflow: hidden;

			}
			
			#y_content #y_contentleft {
				float: left;
				height: 137px;
				margin-left: 25px;
			}
			
			#y_content span {
				display: block;
			}
			
			#y_sapn_zhuce {
				font-size: 18px;
				color: #333;
			}
			
			#y_span_denglu {
				font-size: 14px;
				color: #999;
			}
			
			#y_disanfang2 {
				background-position: 0px -69px;
			}
			
			#y_disanfang3 {
				background-position: 0px -137px;
			}
			
			#y_contentleft li {
				position: relative;
				top: 24px;
				width: 44px;
				height: 50px;
				/*border: 1px solid red;*/
				background-image: url(img/login.png);
				background-repeat: no-repeat;
				float: left;
				list-style-type: none;
				padding: 3px;
				margin-right: 15px;
			}
			
			#y_contentleft li a {
				position: relative;
				top: 38px;
				left: 5px;
				font-family: "微软雅黑";
				font-size: 12px;
			}
			
			#y_contentleft li a:hover {
				color: red;
				text-decoration: underline;
				cursor: pointer;
			}
			
			#y_contentright {
				list-style-type: none;
				/*border: 1px solid red;*/
				/*width: 375px;*/
				width: 60%;
				/*height: 279px;*/
				border-left: 1px solid #E8E8E8;
				padding-left: 20px;
				float: right;
			}
			#y_contentright li{
				margin: 20px;
			}
			#y_contentright span{
				font-size: 18px;
				color: #333333;
			}
			.y_gongyong{
				width: 100%;
				height: 36px;
				border: 1px solid #D8D8D8;
				border-radius: 5px;
				background-image: url(img/login.png);
				background-repeat: no-repeat;
			}
			#y_contentright_email{
				/*水平 垂直*/
				background-position: 8px -203px;
				padding-left: 35px;
				
				
			}
			#y_contentright_password{
				background-position: 8px -239px;
				padding-left: 35px;
				
				
			}
			/*#y_contentright label{
				font-size: 14px;
				color: #999999;
			}*/
			#y_checkbox{
				border-color: #999999;
			}
			#y_denglu{
				margin-top:-220px;
				border: 1px solid;
				width: 320px;
				height: 46px;
				background-color: #F6614B;
				color: white;
				border-radius: 5px;
				font-weight: bold;
				font-size: 18px;
				font-family: "微软雅黑";
			}
			#y_denglu:hover{
				background-color: #E14835;
			}
			#y_contentright a{
				color:#919191;
			}
			#y_contentright a:hover{
				cursor: pointer;
				color: red;
				text-decoration: underline;
				
			}
			#y_zhanghao{
				position: relative;
				top:-15px;
				font-size: 14px;
			
			}
			#y_zhanghao #y_zhanghao
			{
				margin-left: 200px;
			}
			#y_zhanghao #y_password{
				position: relative;
				left: 115px;
			}
			#y_yanzhengemail{
				position: relative;
				left: 150px;
				display: none;
				color: #F79D9D;
				font-size: 12px;
			}
			#y_yanzhengmima{ 
				
				/*position: relative;*/
				/*left: 125px;*/
				float: right;
				color: #F79D9D;
				font-size: 12px;
				display: none;
			}
			#xcdl{
				font-size: 14px;
				color: #999999;
			}
			.jjjjj{}
		</style>
		<script>
			function inputborder(t){
				t.style.boxShadow=""
				t.style.borderColor="#F46E6E";
				t.style.borderWidth="2px";
			}
			function leftinputborder(h){
				h.style.borderColor="#D8D8D8";
				h.style.borderWidth="1px";
				if(h.id=="y_contentright_password"){
					yzmima();
				}
			}
			function yzyhm () {
				var  zzname= /^[a-z0-9_-]{3,16}$/;
				var name=document.getElementById("y_contentright_email");
				if(zzname.test(name.value)){
					document.getElementById("y_yanzhengemail").style.display="none";
				}else{
					document.getElementById("y_yanzhengemail").style.display="block";
				}
			}
			function yzmima () {
				var  zzmima=  /^[a-z0-9_-]{6,18}$/;
				var name=document.getElementById("y_contentright_password");
				if(zzmima.test(name.value)){
					document.getElementById("y_yanzhengmima").style.display="none";
				}else{
					document.getElementById("y_yanzhengmima").style.display="block";
				}
			}
			function denglu () {
				var name=document.getElementById("y_contentright_email");
				var mima=document.getElementById("y_contentright_password");
				var  zzname= /^[a-z0-9_-]{3,16}$/;
				var  zzmima=  /^[a-z0-9_-]{6,18}$/;
				var mimahtml=document.getElementById("y_yanzhengmima");
				
				if(name.value.length==0){
					mimahtml.innerHTML="密码不能为空";
					mimahtml.style.display="block";
				}else{

					mimahtml.innerHTML="密码长度需介于 6 和 20 之间";
					mimahtml.style.display="block";
				}
				
			}
		</script>
	</head>

	<body>
		<!--总的div-->
		<div id="y_zong">
			<!--左上角关闭-->
			<div id="y_cuowu">
				<i class="iconfont iconfont-close"></i>
			</div>
			<div id="y_content">
				<div id="y_contentleft">

					<nobr>
						<span id="y_sapn_zhuce">无需注册</span>
					</nobr>
					<nobr>
						<span id="y_span_denglu">直接使用社交账号登录</span>

					</nobr>
					<a>
						<li id="y_disanfang1" title="新浪微博">
							<a>微博</a>
						</li>

					</a>
					<a>
						<li id="y_disanfang2" title="QQ登陆">
							<a>QQ</a>
						</li>

					</a>
					<a>
						<li id="y_disanfang3" title="支付宝快捷登陆">
							<a>支付宝</a>
						</li>

					</a>

				</div>
				<form id="y_contentright">
					<li>
						<span>
							用户注册
						</span>
					</li>
					<li>
						<input type="text" id="y_contentright_email" placeholder="邮箱/用户名" onfocus="inputborder(this)" class="y_gongyong" onblur="leftinputborder(this)" onclick="click(this)"/>
						<label id="y_yanzhengemail">邮箱/用户名不能为空</label>
					</li>
					<li>
						<input type="text" id="y_contentright_password" class="y_gongyong" placeholder="密码" onfocus="inputborder(this)" onblur="leftinputborder(this)" />
						<label id="y_yanzhengmima">密码长度需介于 6 和 20 之间</label>
					</li>
					<li>
						<label id="xcdl">《卡当注册协议》</label>
					</li>
					<li><input type="submit" value="同意协议并注册" id="y_denglu" onclick="denglu()" /></li>	
					<li id="y_zhanghao">还没账号？
						<a>登录</a>
					</li>
				</form>
			</div>
		</div>
	</body>

</html>